<template>
	<el-main>
		<transition name="router-fade" mode="out-in">
		<div class="login-panel">
			<el-tabs v-model="tab" type="border-card">
				<el-tab-pane label="登录" name="login">
					<el-form ref="loginForm" :rules="loginRules" :model="loginForm" label-width="80px">
						<el-form-item prop="user">
							<el-input
									placeholder="用户名"
									type="text"
									prefix-icon="el-icon-user"
									v-model="loginForm.user">
							</el-input>
						</el-form-item>
						<el-form-item prop="psw">
							<el-input
									placeholder="密码"
									type="password"
									prefix-icon="el-icon-lock"
									v-model="loginForm.psw"
									@keyup.native.enter="login">
							</el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" class="btn-login" @click="login">登 录</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="注册" name="register">
					<el-form ref="regForm" :model="regForm" :rules="regRules" label-width="80px">
						<el-form-item prop="user">
							<el-input
									placeholder="用户名"
									type="text"
									prefix-icon="el-icon-user"
									v-model="regForm.user">
							</el-input>
						</el-form-item>
						<el-form-item prop="psw">
							<el-input
									placeholder="密码"
									type="password"
									prefix-icon="el-icon-lock"
									v-model="regForm.psw">
							</el-input>
						</el-form-item>
						<el-form-item prop="code">
							<el-input
									placeholder="验证码"
									type="password"
									style="width: 55%"
									prefix-icon="el-icon-key"
									v-model="regForm.code">
							</el-input>
							<el-button
									type="primary" class="btn-login"
									style="width: 40%; float:right;"
									:disabled="disBtn"
									plain @click="getCode"
									v-text="btnTime <= -1 || btnTime >= 60 ? '获取验证码':btnTime"
							></el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" class="btn-login" @click="register">注 册</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>
			</el-tabs>
		</div>
		</transition>
	</el-main>
</template>

<script>
  import login from '@/api/login'

  export default {
    data() {
      return {
        tab: 'login',
        loginForm: {
          user: '',
          psw: ''
        },
        regForm: {
          user: '',
          psw: '',
          code: ''
        },

        disBtn: false,
        btnTime: 60,
        loginRules: {
          user: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 2, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
          ],
          psw: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur'}
          ]
        },
        regRules: {
          user: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 2, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
          ],
          psw: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur'}
          ],
          code: [
            {required: true, message: '请输入验证码', trigger: 'blur'},

          ]
        }
      };
    },
    methods: {
      //点击获取验证码，开始计时60s
      getCode() {
        let name = this.regForm.user.trim()
        if (name.length < 2 || name === '' || name > 10){
          this.$Msg.Message.error("请先正确输入用户名")
          return
        }
        login.getCode({account: this.regForm.user}).then(rsp=>{
          this.$Msg.Notification.success({
            title: '提示',
            message: '验证码为 '+rsp.data+' ，有效期为5分钟，请尽快使用',
            duration: 0
          })
          this.codeTimeSub()
        }).catch(err=>this.$Msg.Message.error(err.response.data))
      },
      //登录
      login() {
        this.$refs['loginForm'].validate((valid) => {
          if (valid) {
            login.login({account: this.loginForm.user, password: this.loginForm.psw})
						.then(rsp => {
							this.$store.commit('setUser', rsp.data)
							sessionStorage.setItem('user', JSON.stringify(rsp.data))
							this.$Msg.Message.success("登录成功，欢迎 "+ rsp.data.username)
              this.$router.push('/menu')
            }).catch(err => {
              this.$Msg.Message.error(err.response.data)
            })
          }
        });
      },
      //注册
      register() {
        this.$refs['regForm'].validate((valid) => {
          if (valid) {
            login.register({account: this.regForm.user, password: this.regForm.psw, code: this.regForm.code})
						.then(()=>{
              this.$Msg.Message.success("注册成功，请登录")
              this.tab = 'login'
            }).catch(err=> this.$Msg.Message.error(err.response.data))
          }
        });
      },
      codeTimeSub(){
        //禁用按钮，开始60s倒计时
        this.disBtn = true
        this.btnTime = 60
        const that = this
        setInterval(function () {
          if (that.btnTime <= -1) {
            that.btnTime = -1
            that.disBtn = false
          } else {
            that.btnTime--
          }
        }, 1000)
      }
    }
  }
</script>

<style lang="less">
	.login-panel {
		margin: 200px auto;
		width: 350px;
		border: 1px solid #CCCCCC;
		//border-radius: 8px;
		//box-shadow: 3px 3px 3px 3px #CCCCCC;
		//padding: 10px 50px;
	}
	.el-form-item__content {
		margin-left: 0 !important;
	}
	.btn-login {
		width: 100%;
	}
	.title {
		color: darkgrey;
		margin: 0 auto;
	}
	.el-tabs__item {
		width: 50%;
	}

	//添加路由切换过度动画，淡入淡出
	.router-fade-enter-active{
		transition: all .3s cubic-bezier(0.6, 0.5, 0.3, 0.1);
	}
	.router-fade-leave-active {
		transition: all .3s cubic-bezier(0.5, 0.5, 0.5, 0.5);
	}
	.router-fade-enter{
		transform: translateX(-10px);
		opacity: 0;
	}
	.router-fade-leave-to {
		transform: translateX(50px);
		opacity: 0;
	}
</style>
